<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基于display的行合并表格</title>
<style type="text/css">
.table, .table * {margin: 0 auto; padding: 0;font-size: 14px;font-family: Arial, 宋体, Helvetica, sans-serif;}
.table {display: table; width: 80%; border-collapse: collapse;}
 
.table-tr {display: table-row; height: 30px;}
.table-th {display: table-cell;font-weight: bold;height: 100%;border: 1px solid gray;text-align: center;vertical-align: middle;background-color:#E5E5E5;}
.table-td {display: table-cell; height: 100%;}
 
.sub-table {width: 100%;height: 100%;display: table;}
.sub-table-tr {display: table-row; height: 100%;}
.sub-table-td {display: table-cell; height: 100%;border: 1px solid gray; text-align: center;vertical-align: middle;}
 
</style>
</head>
<body>
 
<div class="table">
	<div class="table-tr">
		<div class="table-td">
			<div class="sub-table">
				<div class="sub-table-tr">
					<div class="table-th" style="width: 40%;">省份／直辖市</div>
					<div class="table-th" style="width: 30%;">GDP(亿元)</div>
					<div class="table-th" style="width: 30%;">增长率</div>
				</div>
			</div>
		</div>
	</div>
	<div class="table-tr">
		<div class="table-td">
			<div class="sub-table">
				<div class="sub-table-tr">
					<div class="sub-table-td" style="width: 40%;">广东</div>
					<div class="sub-table-td" style="width: 30%;">72812</div>
					<div class="sub-table-td" style="width: 30%;">8.0%</div>
				</div>
			</div>
		</div>
	</div>
	<div class="table-tr" style="height:60px;">
		<div class="table-td">
			<div class="sub-table">
				<div class="sub-table-tr">
					<div class="sub-table-td" style="width: 40%; border: none;">
						<div class="sub-table">
							<div class="sub-table-tr" style="height:50%;">
								<div class="sub-table-td" style="width: 100%; height:50%;">
									河南
								</div>
							</div>
							<div class="sub-table-tr" style="height:50%;">
								<div class="sub-table-td" style="width: 100%; height:50%;">
									江苏
								</div>
							</div>
						</div>
					</div>
					<div class="sub-table-td" style="width: 30%;border: none;">
						<div class="sub-table">
							<div class="sub-table-tr" style="height:50%;">
								<div class="sub-table-td" style="width: 100%; height:50%;">
									37010
								</div>
							</div>
							<div class="sub-table-tr" style="height:50%;">
								<div class="sub-table-td" style="width: 100%; height:50%;">
									70116
								</div>
							</div>
						</div>
					
					</div>
					
					<div class="sub-table-td" style="width: 30%;border: none;">
						<div class="sub-table">
							<div class="sub-table-tr">
								<div class="sub-table-td" style="width: 100%;">
									8.4%
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="table-tr">
		<div class="table-td">
			<div class="sub-table">
				<div class="sub-table-tr">
					<div class="sub-table-td" style="width: 70%;">各省／直辖市GDP平均增长率</div>
					<div class="sub-table-td" style="width: 30%;">8.26%</div>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>